<template>
  <div id="box" :style="{width: width}">
    <!-- 只展示文章正文HTML -->
    <!-- 编辑框/正文 -->
    <Editor id="editor-text-area" v-model="html" @onCreated="onCreated" :style="{width: editorWidth}" />
  </div>
</template>

<script>
import Vue from 'vue'
import { Editor } from '@wangeditor/editor-for-vue'
export default Vue.extend({
  components: { Editor },
  props: {
    width: {
      type: String,
      default: "900px",  //组件的宽度
    },
    editorWidth: {
      type: String,
      default: "900px",  //编辑框的宽度
    },
    content: {
      type: String,
      default: "",  //修改文章时传入：获取文章内容进行展示
    },
  },
  data() {
    return {
      editor: null,
      html: '',
    }
  },
  watch: {
    // 监听到父组件传递过来的数据
    content(newData,oldData) {
      this.editor.setHtml(newData)
    },
  },
  methods: {
    onCreated(editor) {
      this.editor=Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.editor.disable() // 只读
    }
  }
})
</script>


<style src="@wangeditor/editor/dist/css/style.css"></style>
<style src="./theme.css"></style>
<style lang="scss" scoped>
#editor-text-area {
  height: auto;
  background-color: transparent;
}
</style>